<template>
	<view v-if="visible" class="modal-mask" @click="closeOnMask && close()">
		<view class="modal" @click.stop>
			<view class="modal-container p40">
				<view class="modal-header fcc">
					<text>{{ title }}</text>
				</view>
				<view class="modal-content">
					<slot></slot>
				</view>
			</view>
			<view class="modal-footer fcc mt50">
				<!-- <up-icon @click="handleCancel" class="close" size="50" name="close-circle"></up-icon> -->
				<image @click="handleCancel" class="close" src="/static/images/supply/close.svg"></image>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {
		defineProps,
		defineEmits
	} from 'vue';

	const props = defineProps({
		visible: Boolean,
		title: String,
		showClose: {
			type: Boolean,
			default: true
		},
		showFooter: {
			type: Boolean,
			default: true
		},

		cancelText: {
			type: String,
			default: '取消'
		},
		closeOnMask: {
			type: Boolean,
			default: true
		},
	});

	const emit = defineEmits(['update:visible', 'confirm', 'cancel']);

	const close = () => {
		emit('update:visible', false);
	};

	const handleConfirm = () => {
		emit('confirm');
		close();
	};

	const handleCancel = () => {
		emit('cancel');
		close();
	};
</script>

<style scoped>
	.modal-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		justify-content: center;
		align-items: center;
		z-index: 999;
	}

	.modal {
		width: 70%;
	}

	.modal-container {
		width: 100%;
		background-color: #fff;
		border-radius: 12rpx;
		overflow: hidden;
		position: relative;
	}

	.modal-header {
		/* padding: 20rpx; */
		/* border-bottom: 1rpx solid #eee; */
		/* display: flex;
		justify-content: space-between;
		align-items: center; */
	}

	.modal-content {
		/* padding: 30rpx; */
	}

	.modal-footer {
		/* padding: 20rpx; */
		/* display: flex;
		justify-content: flex-end;
		gap: 20rpx; */

		height: 50rpx;
		width: 100%;
		/* left: -0rpx; */
		/* position: fixed; */
		/* bottom: 10rpx; */
	}

	.close {
		width: 50rpx;
		height: 50rpx;
	}
</style>